<template>
  <view class="main-container">
    <view class="main-title">
      <view class="padding-xs flex align-center">
        <view class="main-text flex-sub text-center">
          <view class="text-xxl">
            <text class="text-black text-bold">慢病健康助手</text>
          </view>
          <view class="padding text-lg">祝您管理好慢病，提高生活质量</view>
        </view>
      </view>
    </view>

    <!-- 微信授权登陆 -->
    <view class="submit-button padding flex flex-direction">
      <view class="text-df text-center margin-bottom-df">
        <text class="text-gray">需要获取您的手机号用于注册登陆</text>
      </view>
      <!-- 微信一键登陆 -->
      <button class="cu-btn bg-green margin-tb-sm lg" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
        <view class="text-xxl">
          <text class="lg text-lg cuIcon-weixin"></text>
        </view>
        微信一键登陆
      </button>
      <!-- 手机号验证登陆 -->
      <button class="cu-btn block line-grey margin-tb-sm lg" @click="smsClick">手机号验证登陆</button>
    </view>

  </view>
</template>

<script>
  // 1. 按需导入 mapMutations 辅助函数
  import {
    mapMutations,
    mapState
  } from 'vuex'

  export default {
    onLoad() {
      this.init();
    },
    computed: {
      // 2. 从 m_user 模块中导入需要的 token 字符串
      ...mapState('m_user', ['redirectInfo', 'isLoginout', 'isLogin']),
    },
    methods: {
      // 使用 mapMutations 辅助方法，把 m_user 模块中的 updateToken 方法映射到当前组件中使用
      ...mapMutations('m_user', ['updateUserInfo', 'updateToken', 'updateIsLogin', 'updateRedirectInfo',
        'redirectPage', 'updatePatientInfo'
      ]),
      // 短信验证码登陆
      smsClick() {
        uni.navigateTo({
          url: '/subpkg/sms_login/sms_login'
        })
      },
      /** 登陆方法 */
      async init() {
        let that = this;
        wx.login({
          success(res) {
            const query = {
              appid: that.$appid,
              code: res.code
            };
            uni.$http.get('/login', query).then(res2 => {
              console.log(res2);
              // 保持token到本地缓存中
              // 2. 更新 vuex 中的 token 
              const data = res2.data.data;
              const code = res2.data.code;
              if (!data || !data.token) {
                // 如果没有返回token，说明登陆失败了直接报错
                uni.$showMsg("系统出现异常，请稍后重试!");
                return;
              }
              // console.log(that.isLoginout); 200 ：代表已经登陆授权 500： 代表登陆未授权
              if (code === 200 || code === 500) {
                console.log('更新信息');
                // 更新一系列数据
                const patientInfo = {
                  patientId: data.patientInfo.id,
                  name: data.patientInfo.name,
                  phone: data.patientInfo.phone
                };
                // 更新用户信息和token
                const {
                  id,
                  phone,
                  avatar,
                  nickname
                } = data.user;
                // 更新token
                that.updateToken(data.token);
                // 更新用户信息
                that.updateUserInfo({
                  id,
                  phone,
                  avatar,
                  nickname
                });
                // 更新患者信息
                that.updatePatientInfo({
                  patientId: data.patientInfo.id,
                  name: data.patientInfo.name,
                  phone: data.patientInfo.phone
                });
              }
              // isLogin为0有两种情况，一：用户第一次登陆未绑定手机号， 二：用户太久为登陆导致缓存失效
              // 判断是否主动登出
              // const isLoginout = that.isLoginout; isLoginout != 1 && 
              const isLogin = that.isLogin;
              if (isLogin == 1) {
                // 用户已经登陆了就直接跳转
                // 更新isLogin
                // that.updateIsLogin(1);
                // 跳转到对应的页面
                that.redirectPage();
              }
            });
          }
        });
      },
      // 一键登陆方法
      getPhoneNumber(e) {
        console.log(e.detail.code) // 动态令牌
        console.log(e.detail.errMsg) // 回调信息（成功失败都会返回）
        console.log(e.detail.errno) // 错误码（失败时返回）
      }
    },
    data() {
      return {};
    }
  }
</script>

<style lang="scss">
  .main-title {
    overflow: hidden;
    /* overflow: hidden;不加此属性会导致移动端出现横向滚动条 */
    position: relative;
    height: 265px;

    .main-text {
      margin-top: 100px;
    }
  }

  .main-title::after {
    content: '';
    width: 120%;
    height: 100%;
    position: absolute;
    left: -10%;
    top: 0;
    z-index: -1;
    border-radius: 0 0 50% 50%;
    background: #D9F0F0;
  }

  .submit-button {
    margin-top: 150px;
  }
</style>